<%@ page pageEncoding='UTF-8'%>
<%@ taglib prefix="s" uri="/struts-tags" %>
<s:set var="contextPath" value="#request.get('javax.servlet.forward.context_path')" scope="request" />
<!DOCTYPE html>
<head>
    <title>Edit Patient Details</title>
    <%-- header --%>
    <jsp:include page="/WEB-INF/content/common/Header.jsp" flush="true"/>
    <script src="${contextPath}/js/jquery/jquery.validate.js"></script>
    <script src="${contextPath}/js/jquery/metro-calendar.js"></script>
    <script src="${contextPath}/js/jquery/metro-datepicker.js"></script>
    <script src="${contextPath}/js/jquery/jquery.maskedinput.min.js"></script>
    <script src="${contextPath}/js/patient/patient.js"></script>
	
</head>
<body class="metro home">
	<%-- tob-bar --%>
    <jsp:include page="/WEB-INF/content/common/TopBar.jsp" flush="true"/>
       	
	<div id="main-container" class="body-wrapper">
        <%-- tob-container --%>
    	<jsp:include page="/WEB-INF/content/common/TopContainer.jsp" flush="true"/>
        
    	<div id="body-container">
        	<div id="patient-edit-form-container" class="form-container">
        		<%-- header-container --%>
        		<s:set var="mode" value="'edit'"/>
    			<jsp:include page="/WEB-INF/content/patient/PatientMenuContainer.jsp" flush="true"/>
    			
    			<%-- banner-container --%>
               
                <div class="form-body-container">
	        		<form id="patient-edit-form" class="edit-form patient-form" action="${contextPath}/patient/update" method="post">
	                	<input type="hidden" name="guiPatient.userId" value="${guiPatient.userId}" />
	                	<fieldset>
	                    	<legend style="width:95%">Edit Patient Details</legend>
	                        <label>Name<em class="text-alert">*</em></label>
	                        <div class="input-control text" style="width:95%">
	                        	<input type="text" name="guiPatient.name" value="${guiPatient.name}" placeholder="input text" required/>
	                            <button class="btn-clear"></button>
							</div>
	                        <label style="width:95%">Type</label>
	                        <div style="width:95%">
	                        	<input type="hidden" name="guiPatient.type" value="PATIENT"/>
	                            <div class="input-control text">
	    							<input type="text" value="" placeholder="Patient" disabled/>
	    							<button class="btn-clear"></button>
								</div>
							</div>
							<label>Date Of Birth</label>
							<div style="width:95%">
								<div id="dob-picker" class="input-control text" data-role="datepicker" data-date='${guiPatient.dobString}' data-format='yyyy-mm-dd'>
									<input type="text" name="guiPatient.dobString" value="${guiPatient.dobString}">
									<div class="btn-date"></div>
								</div>
							</div>
							<label>Telephone</label>
							<div style="width:95%">
								<div class="input-control text">
		                        	<input type="text" name="guiPatient.contact.telNo" value="${guiPatient.contact.telNo}" placeholder="ex:(xxx) xxx-xxxx" class="required user-contact"/>
		                            <button class="btn-clear"></button>
								</div>
							</div>
							<label>Address</label>
	                    	<div style="width:95%">
								<div class="input-control text">
		                        	<input type="text" name="guiPatient.contact.address" value="${guiPatient.contact.address}" placeholder="input address" class="required"/>
		                            <button class="btn-clear"></button>
								</div>
							</div>
	                        <label>Gender</label>
							<div style="width:95%">
								<div class="input-control radio default-style" data-role="input-control">
									<label>
									<s:if test="%{guiPatient.male}">
										<input type="radio" name="guiPatient.gender" value="MALE" checked="checked"/>
									</s:if>
									<s:else>
										<input type="radio" name="guiPatient.gender" value="MALE"/>
									</s:else>
									<span class="check"></span> Male
									</label>
								</div>
								<div class="input-control radio default-style" data-role="input-control">
									<label>
									<s:if test="%{guiPatient.female}">
										<input type="radio" name="guiPatient.gender" value="FEMALE" checked="checked"/>
									</s:if>
									<s:else>
										<input type="radio" name="guiPatient.gender" value="FEMALE"/>
									</s:else>
										<span class="check"></span> Female
									</label>
								</div>
							</div>
							<div class="form-button-container">
								<a onClick="$('#patient-edit-form').submit(); return false;">
                                    <div class="form-button tile half-vertical subheader-secondary bg-cobalt fg-white">
                                        Update <i class="icon-pencil on-right smaller"></i>
                                    </div>
                            	</a> 
								<a href="${contextPath}">
		                          	<div class="form-button tile half-vertical subheader-secondary bg-cyan fg-white">
		                            	cancel <i class="icon-cancel-2 on-right smaller"></i>
		                           	</div>
								</a>
	                            <br clear="all"/>
	                       </div> 
	        			</fieldset>
	        		</form>
                </div>
                <br clear="all"/>
    		</div>    
    	</div>
        
        <%-- bottom-container --%>
    	<jsp:include page="/WEB-INF/content/common/BottomContainer.jsp" flush="true"/>
        
	</div>
    
    <%-- footer-container --%>
    <jsp:include page="/WEB-INF/content/common/FooterContainer.jsp" flush="true"/>
    
</body>
</html>
                